<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<!DOCTYPE HTML>

<html>
<head>
  <title>添加关联人</title>
  <!-- CSS -->
  <link rel="stylesheet" href="${path}/pet/home/css/animate.css">
  <link rel="stylesheet" href="${path}/pet/home/css/bootstrap.css">
  <link rel="stylesheet" href="${path}/pet/login/css/login.css">
  <!-- jQuery -->
  <%--<script src="${path}/pet/home/js/jquery.min.js"></script>--%>
  <script src="${path}/pet/home/js/mobile_tab.js"></script>
  <script src="${path}/pet/home/js/jquery.bootstrap.js"></script>
</head>

<body>
<div id="page">
  <div class="page-inner">
    <header role="banner" style="height:auto;margin-bottom: 0px;">
      <div class="row">
        <div class="col-md-12 col-md-offset-0 text-left">
          <div class="tab-content" style="background-color: #FFF;padding: 0px 10px;">
            <form action="#">
              <div class="row form-group">
                <div class="col-md-12">
                  <label for="personName">关联人姓名</label>
                  <input type="text" class="form-control" id="personName" placeholder="请输入关联人姓名">
                  <div id="s_username0" style="color: #FD3F31;display: none;">用户名长度过长，请重新输入</div>
                  <div id="s_username1" style="color: #FD3F31;display: none;">用户名不能为空</div>
                  <div id="s_username2" style="color: #FD3F31;display: none;">用户名已存在，请重新输入</div>
                  <div id="s_username3" style="color: #43C608;display: none;">用户名合格</div>
                </div>
              </div>
              <div class="row form-group">
                <div class="col-md-12">
                  <label for="idType">证件类型</label>
                  <select class="form-control" id="idType" style="height: 48px;">
                    <option>二代身份证</option>
                    <option>港澳居民往来内地通行证</option>
                    <option>台湾居民来往大陆通行证</option>
                    <option>护照（外籍人士）</option>
                  </select>
                </div>
              </div>
              <div class="row form-group">
                <div class="col-md-12">
                  <label for="idendity">证件号</label>
                  <input type="text" class="form-control" id="idendity" placeholder="请选择证件号" oninput = "value=value.replace(/[^\d]/g,'')">
                  <div id="idendity1" style="color: #FD3F31;display: none;">只能输入长度为18的数字，请重新输入</div>
                  <div id="idendity2" style="color: #43C608;display: none;">证件号合格</div>
                </div>
              </div>
              <div class="row form-group">
                <div class="col-md-12">
                  <label for="phone">手机号码</label>
                  <input type="text" class="form-control" id="phone" placeholder="请输入手机号码" oninput = "value=value.replace(/[^\d]/g,'')">
                  <div id="s_phone2" style="color: #FD3F31;display: none;">请输入有效的手机号码</div>
                  <div id="s_phone3" style="color: #43C608;display: none;">手机号合格</div>
                </div>
              </div>
              <div class="row form-group">
                <div class="col-md-12">
                  <label for="relation">关系</label>
                  <select class="form-control" id="relation" style="height: 48px;">
                    <option>本人</option>
                    <option>父母</option>
                    <option>子女</option>
                    <option>亲人</option>
                    <option>朋友</option>
                  </select>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </header>
  </div>
</div>
</body>
<script type="text/javascript">
  $(function() {
      var user="<%=session.getAttribute("user")%>";
      var uid = ${user.id};

    $("#idendity").blur(function() {
      var idendity = $.trim($("#idendity").val());
      if (Number(idendity.value) == "NaN" || idendity.length != 18) {  //当输入不是数字的时候，Number后返回的值是NaN;然后用isNaN判断。
        $('#idendity1').show();
        $('#idendity2').hide();
      } else {
        $('#idendity2').show();
        $('#idendity1').hide();
      }
    });

    $("#phone").blur(function() {
      var phone = $.trim($("#phone").val());
      if(phone.length !=11 ) {
        $("#s_phone2").show();
        $("#s_phone3").hide();
      } else {
        $("#s_phone2").hide();
        $("#s_phone3").show();
      }
    });

    $("#personName").blur(function(){
      var personName = $.trim($("#personName").val());
      var inputVal = $.trim($("#personName").val());
      inputValinputVal = inputVal.replace(/^\s*|\s*$/g,"");  //去除首尾空格
      if ( inputVal.length == 0 ){    ////未输入用户名
        $("#s_username1").show();
        $("#s_username0").hide();
        $("#s_username2").hide();
        $("#s_username3").hide();
        $("#relation").removeAttr("disabled");
      } else {
        var _match = inputVal.match(/^[a-zA-Z0-9\u4e00-\u9fa5]+$/g);    //只能匹配数字,字母或汉字
        var codeMatch = inputVal.match(/[a-zA-Z0-9]/g);   //匹配数字或字母(包括大小写)
        var charMatch = inputVal.match(/[\u4e00-\u9fa5]/g);  //匹配汉字
        var codeNum = codeMatch ? codeMatch.length : 0;   //数字或字母个数
        var charNum = charMatch ? charMatch.length : 0;   //汉字个数
        //字符检测成功
        if ( _match && codeNum + 2*charNum <= 12 ) {
          $.ajax({
            url:"/user/registerUsernameCheck",
            type:"post",
            data:{username:personName},
            error: function () {
              console.log("失败");
            },
            success:function(data){
              if(data.result=="notsuccess") {
                if(personName == "${user.username}"){    //用户名是本人
                  $("#s_username0").hide();
                  $("#s_username3").show();
                  $("#s_username2").hide();
                  $("#s_username1").hide();
                  $("#relation").attr("disabled","disabled");
                } else {      //用户名重复，且不是本人
                  $("#s_username0").hide();
                  $("#s_username2").show();
                  $("#s_username1").hide();
                  $("#s_username3").hide();
                  $("#relation").removeAttr("disabled");
                }
              } else if(data.result=="success"){   //用户名不是本人，且不存在
                $("#s_username0").hide();
                $("#s_username3").show();
                $("#s_username2").hide();
                $("#s_username1").hide();
                $("#relation").removeAttr("disabled");
              }
            }
          });
        } else if(codeNum + 2*charNum > 12){    //用户名合格
          $("#s_username0").show();
          $("#s_username2").hide();
          $("#s_username1").hide();
          $("#s_username3").hide();
          $("#relation").removeAttr("disabled");
        }
      }
    });
  });
</script>


<style>
  .row-mt-15em {
    margin-top: 22em;
  }
  #gtco-header .mt-text {
    margin-top: 5em;
    margin-bottom: 3em;
  }
  .form-group {
    margin-bottom: 10px;
  }
  #gtco-header .form-wrap .tab-content {
    padding-bottom: 10px;
  }
  .btn-primary {
    margin-top: 5px;
  }
  .regist {
    margin-top: -18em;
  }
  @media screen and (max-width: 768px){
    #gtco-header .mt-text {
      margin-top: 7em;
      margin-bottom: 3em;
      display: none;
    }
  }
  /*#badge {*/
    /*padding: 2px 5px;  /!* 不需要定义height与width，添加合适的padding使圆圈随字符长短变化而改变 *!/*/
    /*line-height: 20px;*/
    /*text-align: center;*/
    /*background-color: red;*/
    /*color: white;*/
    /*font-size: 12px;*/
    /*font-weight: 700;*/
    /*border-radius: 50%;*/
    /*/!*position: relative;*!/*/
    /*/!*bottom: 45px;*!/*/
    /*/!*left: -20px;*!/*/
  /*}*/
</style>

</html>
